<template>
  <div style="padding:0 20px;">
    <div class="roleInput">
      <el-button type="primary"
                 size="medium"
                 @click="handleAdd">新建规则</el-button>
    </div>
    <div>
      <el-table :data="tableData"
                style="width: 100%;margin-bottom: 20px;"
                row-key="id"
                border
                :default-expand-all="false"
                :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
        <el-table-column prop="id" label="" width="80" align="left">
          <template slot-scope="scope">
            {{scope.row?'':''}}
          </template>
        </el-table-column>
        <el-table-column prop="auth_name"
                         label="标题"
                         align="center"
                         width="180"></el-table-column>
        <el-table-column prop="rule"
                         align="center"
                         label="规则"></el-table-column>
        <el-table-column prop="status"
                         label="是否开启"
                         width="180"
                         align="center">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status==1"
                    type="success">是</el-tag>
            <el-tag v-if="scope.row.status==0"
                    type="info">否</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作"
                         align="center">
          <template slot-scope="scope">
            <el-button icon="el-icon-edit"
                       type="text"
                       @click="handleEdit(scope.row)">编辑</el-button>
            <span style="padding:8px;"></span>
            <el-button type="text"
                       icon="el-icon-delete"
                       @click="handleDelete(scope.row)"
                       style="color: #f56c6c;">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--添加组织名称-->
    <el-dialog :title="rbacTitle"
               :visible.sync="editVisible"
               width="30%">
      <div class="list-group">
        <div style="padding:10px;">
          <el-row :gutter="20">
            <el-col :span="6">
              <div class="list-title">父级:</div>
            </el-col>
            <el-col :span="18">
              <el-cascader v-model="parentId"
                           ref="org"
                           :options="cascaderData"
                           placeholder="选择父级，默认为顶级"
                           :props="{ checkStrictly: true, value:'id',children: 'children',label: 'auth_name'}"
                           clearable></el-cascader>
            </el-col>
          </el-row>
        </div>
        <div style="padding:10px;">
          <el-row :gutter="20">
            <el-col :span="6">
              <div class="list-title"><span class="mast-icon">*</span>标题:</div>
            </el-col>
            <el-col :span="18">
              <el-input v-model="authName"
                        placeholder="请输标题"></el-input>
            </el-col>
          </el-row>
        </div>
        <div style="padding:10px;">
          <el-row :gutter="20">
            <el-col :span="6">
              <div class="list-title"><span class="mast-icon">*</span>规则:</div>
            </el-col>
            <el-col :span="18">
              <el-input v-model="rule"
                        placeholder="请输规则"></el-input>
            </el-col>
          </el-row>
        </div>
        <div style="padding:10px;">
          <el-row :gutter="20">
            <el-col :span="6">
              <div class="list-title">跳转路径:</div>
            </el-col>
            <el-col :span="18">
              <el-input v-model="path"
                        placeholder="请输跳转路径"></el-input>
            </el-col>
          </el-row>
        </div>
        <div style="padding:10px;">
          <el-row :gutter="20">
            <el-col :span="6">
              <div class="list-title">排序:</div>
            </el-col>
            <el-col :span="18">
              <el-input-number v-model="sort"
                               controls-position="right"
                               :min="0"
                               :max="10"></el-input-number>
            </el-col>
          </el-row>
        </div>
        <div style="padding:10px;">
          <el-row :gutter="20">
            <el-col :span="6">
              <div class="list-title">是否开启:</div>
            </el-col>
            <el-col :span="18">
              <el-switch style="display: block"
                         v-model="status"
                         active-color="#13ce66"
                         inactive-color="#ff4949"
                         active-text="开启"
                         inactive-text="关闭"></el-switch>
            </el-col>
          </el-row>
        </div>
      </div>
      <span slot="footer"
            class="dialog-footer">
        <el-button size="medium" @click="editVisible = false">取 消</el-button>
        <el-button size="medium" type="primary" @click="saveEdit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      rbacTitle:'',
      editOrAdd: 1,
      editVisible: false,
      tableData: [],
      cascaderData: [],
      options: [],
      parentId: [],
      authName: '',
      rule: '',
      path: '',
      status: true,
      sort: 0,
      id: null,
    };
  },
  mounted () {
    this.initAjaxMethod();
  },
  methods: {
    //初始化页面列表
    initAjaxMethod () {
      const loading = this.$loading({ text: '加载中...' });
      this.$http
        .post(this.$API.AUTH_INDEX, {})
        .then(res => {
          loading.close();
          console.log('规则列表', res);
          if (res.code == 1) {
            this.tableData = res.data;
            let tableData = JSON.parse(JSON.stringify(res.data));//结构一般的深度拷贝
            for (let i in tableData) {
              if (tableData[i].children) {
                let c = tableData[i].children;
                if (c.length > 0) {
                  for (let j in c) {
                    delete c[j].children;
                  }
                }
              }
            }
            this.cascaderData = tableData;
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch(err => {
          this.$message.error(err.msg);
        });
    },
    //新增
    handleAdd () {
      this.editVisible = true;
      this.editOrAdd = 1;
      this.parentId = [];
      this.authName = '';
      this.rule = '';
      this.path = '';
      this.status = true;
      this.sort = 0;
      this.rbacTitle='新建规则'
    },
    //点击编辑
    handleEdit (data) {
      console.log(data)
      this.editVisible = true;
      this.editOrAdd = 2;
      this.id = data.id;
      this.parentId = data.parent_id_arr;
      this.authName = data.auth_name;
      this.rule = data.rule;
      this.path = data.path;
      this.status = data.status == 1 ? true : false;
      this.sort = data.sort;
      this.rbacTitle='编辑规则'
    },
    //弹出框确定
    saveEdit () {
      let parentId = this.parentId.length > 0 ? this.parentId[this.parentId.length - 1] : 0;
      let parmam = { parent_id: parentId, auth_name: this.authName, rule: this.rule, path: this.path, status: this.status ? 1 : 0, sort: this.sort };
      let url = this.$API.AUTH_ADD;
      if (this.editOrAdd == 2) {
        parmam.id = this.id;
        url = this.$API.AUTH_EDIT;
      }
      const loading = this.$loading({ text: '保存中...' });
      this.$http
        .post(url, parmam)
        .then(res => {
          loading.close();
          console.log('新增规则', res);
          if (res.code == 1) {
            this.$message.success('保存成功');
            this.editVisible = false;
            this.initAjaxMethod();
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch(err => {
          this.$message.error(err.msg);
        });
    },
    //点击删除
    handleDelete (data) {
      let id = data.id;
      console.log(id);
      this.$confirm('此操作将永久删除该角色, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$http.post(this.$API.AUTH_DEL, { id: id }).then(res => {
            //console.log(res)
            if (res.code == 1) {
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
              this.initAjaxMethod();
            } else {
              this.$message({
                type: 'error',
                message: res.msg
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
    }
  }
};
</script>


<style scoped>
.roleInput {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 20px 0;
}
  .list-title{
    /* padding:7px; */
    height: 32px; 
    display: flex;
    align-items: center;
  }
</style>